﻿@page "/messages"
@inherits PageBase

<PageContainer>
    <Breadcrumb>
        <Breadcrumb>
            <BreadcrumbItem><Icon Type="home"></Icon></BreadcrumbItem>
            <BreadcrumbItem><Icon Type="message"></Icon><span>留言板</span></BreadcrumbItem>
        </Breadcrumb>
    </Breadcrumb>
    <ChildContent>
        <Card Bordered="false">
            <Comment Avatar="@MessageModel.Avatar">
                <ContentTemplate>
                    <Vditor.Editor Placeholder="在这里输入你的留言内容..."
                                   Mode="ir"
                                   @bind-Value="@MessageModel.Content"
                                   Toolbar="Toolbar"
                                   Width="100%"
                                   MinHeight="300" />
                    <br />
                    <Button type="@ButtonType.Primary" OnClick="SubmitMessageAsync">我要留言</Button>
                </ContentTemplate>
            </Comment>
        </Card>
        <Card Bordered="false">
            @foreach (var item in messages)
            {
                <Comment Author="@item.Name"
                         Avatar="@item.Avatar"
                         Datetime="@item.CreatedAt"
                         ContentTemplate="@RenderContent(item.Content)"
                         Actions="@(new[] { replyAction(item.Id), item.UserId == UserId ? deleteAction(item.Id) : null })">
                    @if (item.Reply.Any())
                    {
                        <AntList DataSource="item.Reply" TItem="MessageReplyDto" Size="small">
                            <ListItem>
                                <Comment Author="@context.Name"
                                         Avatar="@context.Avatar"
                                         Datetime="@context.CreatedAt"
                                         ContentTemplate="@RenderContent(context.Content)"
                                         Actions="@(new[] { context.UserId == UserId ? deleteReplyAction(item.Id, context.Id) : null })">
                                </Comment>
                            </ListItem>
                        </AntList>
                    }
                </Comment>
                <Divider Dashed="true" />
            }
            @if (total > limit)
            {
                <div style="text-align:center">
                    <Pagination Total="@total" PageSize="@limit" OnPageIndexChange="HandlePageIndexChange" />
                </div>
            }
        </Card>
        <Drawer Closable="true"
                Visible="visible"
                Placement="right"
                Title='("回复留言")'
                Width="1000"
                OnClose="_ => Close()">
            <Comment Avatar="@ReplyMessageModel.Avatar">
                <ContentTemplate>
                    <Vditor.Editor Placeholder="在这里输入你的留言内容..."
                                   Mode="ir"
                                   @bind-Value="@ReplyMessageModel.Content"
                                   Toolbar="Toolbar"
                                   Width="100%"
                                   MinHeight="300" />
                    <br />
                    <Button type="@ButtonType.Primary" OnClick="SubmitReplyMessageAsync">回复</Button>
                </ContentTemplate>
            </Comment>
        </Drawer>
    </ChildContent>
</PageContainer>

@code{
    RenderFragment replyAction(string id) =>@<Button Type="@ButtonType.Link" Size="small" @onclick="_ => Open(id)">回复</Button>;

    RenderFragment deleteAction(string id) => @<Popconfirm Title="确定删除吗?" Icon="close-circle" OnConfirm="(async () => await DeleteMessageAsync(id))"><Button Type="@ButtonType.Link" Danger Size="small">删除</Button></Popconfirm>;

    RenderFragment deleteReplyAction(string id, string replyId) => @<Popconfirm Title="确定删除吗?" Icon="close-circle" OnConfirm="(async () => await DeleteReplyMessageAsync(id, replyId))"><Button Type="@ButtonType.Link" Danger Size="small">删除</Button></Popconfirm>;

    RenderFragment RenderContent2(string content) => @<div style="margin-top:15px;">@((MarkupString)@content)</div>;

    RenderFragment RenderContent(string content) => @<Vditor.Preview Markdown="@content"></Vditor.Preview>;
}